<template>
  <div :style="sideBarWrapperStyle" @mouseenter="onSideBarMouseenter" @mouseleave="onSideBarMouseleave">
    <page-left-head />
    <!-- <page-left-operation /> -->
    <page-left-menu />
  </div>
</template>

<script setup lang="ts">
import PageLeftHead from './page-left-head/page-left-head.vue';
// import PageLeftOperation from './page-left-operation/page-left-operation.vue'
import PageLeftMenu from './page-left-menu/page-left-menu.vue';
import { usePageLeft } from './style-page-left';

// 鼠标是否位于左侧边栏上
const isSideBarHover = ref(false);
provide('isSideBarHover', readonly(isSideBarHover));
const onSideBarMouseenter = () => {
  isSideBarHover.value = true;
};
const onSideBarMouseleave = () => {
  isSideBarHover.value = false;
};

const { sideBarWrapperStyle } = usePageLeft();
</script>
